<template>
  <dv-border-box-3 class="box" :color="['#339ebe', '#3872ac']">
    <dv-water-level-pond
      :config="config"
      style="width: 200px; height: 200px; margin: 12px 0 0 70px"
    />
    <span>{{ $t('page2.Secondary_Processing') }}</span>
    <dv-border-box-2 class="text" :color="['#339ebe', '#3872ac']">
      <p>
        {{ $t('checkbox.Running') }}(
        {{
          Math.round(
            (AnalyseDayList3.onTime /
              (AnalyseDayList3.onTime +
                AnalyseDayList3.offTime +
                AnalyseDayList3.noTime +
                AnalyseDayList3.ngTime)) *
              100
          )
        }}%)
      </p>
      <p>
        {{ $t('checkbox.Idle') }}({{
          Math.round(
            (AnalyseDayList3.noTime /
              (AnalyseDayList3.onTime +
                AnalyseDayList3.offTime +
                AnalyseDayList3.onTime +
                AnalyseDayList3.ngTime)) *
              100
          )
        }}%)
      </p>
      <p>
        {{ $t('checkbox.Failure') }}({{
          Math.round(
            (AnalyseDayList3.ngTime /
              (AnalyseDayList3.onTime +
                AnalyseDayList3.offTime +
                AnalyseDayList3.noTime +
                AnalyseDayList3.onTime)) *
              100
          )
        }}%)
      </p>
      <p>
        {{ $t('checkbox.Downtime') }}({{
          Math.round(
            (AnalyseDayList3.offTime /
              (AnalyseDayList3.onTime +
                AnalyseDayList3.onTime +
                AnalyseDayList3.noTime +
                AnalyseDayList3.ngTime)) *
              100
          )
        }}%)
      </p>
    </dv-border-box-2>
  </dv-border-box-3>
</template>

<script>
export default {
  props: {
    AnalyseDayList3: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      config: {
        data: [],
        shape: "round",
        waveHeight: 30,
        waveOpacity: 0.5,
        waveNum: 2,
        colors: ["#BEE651", "#E7FF73"],
      },
    };
  },
  watch: {
    AnalyseDayList3: {
      handler(newVal) {
        this.AnalyseDayList3 = newVal;
      },
      immediate: true,
      deep: true,
    },
  },
  created() {
    this.config.data = [];
    let data = this.AnalyseDayList3;
    this.config.data[0] = Math.round(
      (data.onTime / (data.onTime + data.offTime + data.noTime + data.ngTime)) *
        100
    );
    this.config.data[1] = 55;
  },
};
</script>

<style lang="scss" scoped>
.box {
  width: 400px;
  height: 29vh;
  margin-left: 30px;
  padding-top: 40px;
}

span {
  font-size: 16px;
  font-weight: 700;
  color: #75e9f3;
  position: absolute;
  margin: -220px 0 0 20px;
}
.text {
  position: absolute;
  margin: -70px 0 0 280px;
  padding: 5px 0 0 14px;
  font-size: 12px;
  height: 105px;
  width: 90px;
  color: #a8aa1a;
  display: flex;
  flex-direction: column;
  // justify-content: space-around;
  p {
    line-height: 8px;
  }
}
</style>
